<template>
  <div class="home">
    <!-- 添加组件的弹窗 -->
    <AddBlockContent></AddBlockContent>
    <!-- 样式编辑 -->
    <EditorBar :editable="editable" :drag="drag"></EditorBar>
    <!-- 目录 -->
    <Catalogue></Catalogue>
    <!-- 操作栏 -->
    <OperateBar />

    <!-- <div class="header">
      <h1>All-in-one</h1>
      <p>模块化内容构建编辑器，基于Vue和element的打造</p>
      <p>以Json格式输出，灵感来自Notion</p>
      <el-link
        :underline="false"
        href="https://github.com/CedarXi/All-in-one"
        class="el-link-btn"
        target="_blank"
      >
        <i>
          <img src="../assets/github.svg" width="18px" />
        </i>
        GitHub
      </el-link>
    </div> -->

    <div class="container-870">
      <div class="editable-switch">
        <el-switch
          v-model="editable"
          active-text="编辑模式"
          inactive-text="只读模式"
        ></el-switch>
      </div>
      <draggable
        class="list-group"
        tag="ul"
        :list="getCurrentPageBlocks"
        handle=".handle"
        @start="drag = true"
        @end="
          drag = false;
          dragEnd();
        "
        @update="dragUpdate"
        v-bind="{
          animation: 200,
          group: 'description',
          disabled: false,
          ghostClass: 'ghost',
        }"
      >
        <div
          class="line-wrap list-group-item"
          v-for="(item, index) in getCurrentPageBlocks"
          :key="index"
        >
          <div class="line-left" v-if="editable">
            <!-- 弹出添加组件的弹窗+号按钮 -->
            <AddBlockBtn :BlocksIndex="index"></AddBlockBtn>
            <!-- 拖拽组件 -->
            <a
              class="drag-btn handle"
              @click="
                (e) => {
                  openOperateBar(e, index);
                }
              "
            >
              <i class="iconfont icondrag"></i>
            </a>
          </div>
          <div class="line-right" v-if="render">
            <TextBlock
              v-model="item.data"
              :BlocksIndex="index"
              :type="item.type"
              v-if="item.type == 'text'"
            ></TextBlock>

            <Heading1
              v-model="item.data"
              :BlocksIndex="index"
              :type="item.type"
              v-if="item.type == 'heading1'"
            ></Heading1>
            <Heading2
              v-model="item.data"
              :BlocksIndex="index"
              :type="item.type"
              v-if="item.type == 'heading2'"
            ></Heading2>
            <Heading3
              v-model="item.data"
              :BlocksIndex="index"
              :type="item.type"
              v-if="item.type == 'heading3'"
            ></Heading3>
            <TodoBlock
              v-model="item.data"
              :BlocksIndex="index"
              :type="item.type"
              v-if="item.type == 'todo'"
            ></TodoBlock>
            <BulletedList
              v-model="item.data"
              :BlocksIndex="index"
              :type="item.type"
              v-if="item.type == 'bulletedList'"
            ></BulletedList>
            <Hint
              v-model="item.data"
              :BlocksIndex="index"
              :type="item.type"
              v-if="item.type == 'hint'"
            ></Hint>
            <ImageBlock
              v-model="item.data"
              :BlocksIndex="index"
              :type="item.type"
              v-if="item.type == 'image'"
            ></ImageBlock>
            <VideoBlock
              v-model="item.data"
              :BlocksIndex="index"
              :type="item.type"
              v-if="item.type == 'video'"
            ></VideoBlock>
          </div>
        </div>
      </draggable>

      <div class="btn-wrap">
        <el-button class="button">取消</el-button>
        <el-button class="button" type="primary">保存</el-button>
      </div>
    </div>
  </div>
</template>


<script>
// 引入vuedraggable拖拽组件
import draggable from "vuedraggable";
// 编写的模块组件
import AddBlockBtn from "@/components/AddBlockBtn";
import AddBlockContent from "@/components/AddBlockContent";
import OperateBar from "@/components/OperateBar";
import EditorBar from "@/components/EditorBar.vue";
import Catalogue from "@/components/Catalogue.vue";
// 块组件
import TextBlock from "@/components/blockComponents/TextBlock";
import TodoBlock from "@/components/blockComponents/TodoBlock";
import Heading1 from "@/components/blockComponents/Heading1";
import Heading2 from "@/components/blockComponents/Heading2";
import Heading3 from "@/components/blockComponents/Heading3";
import BulletedList from "@/components/blockComponents/BulletedList";
import Hint from "@/components/blockComponents/Hint";
import ImageBlock from "@/components/blockComponents/ImageBlock";
import VideoBlock from "@/components/blockComponents/VideoBlock";

export default {
  name: "Home",
  components: {
    draggable,
    AddBlockBtn,
    AddBlockContent,
    OperateBar,
    TextBlock,
    TodoBlock,
    Heading1,
    Heading2,
    Heading3,
    BulletedList,
    Hint,
    ImageBlock,
    VideoBlock,
    EditorBar,
    Catalogue,
  },
  data() {
    return {
      drag: false, // 是否拖动
      editable: true, // 是否可编辑
      render: true, // 是否渲染左边列表
    };
  },
  computed: {
    getCurrentPageBlocks() {
      return this.$store.getters.getterCurrentPageBlocks;
    },
    isShowAddMenu() {
      return this.$store.state.isShowAddMenu;
    },
    isShowOperateBar() {
      return this.$store.state.isShowOperateBar;
    },
  },
  watch: {
    editable(val) {
      let dom = document.getElementsByClassName("edit");
      for (let index = 0; index < dom.length; index++) {
        const element = dom[index];
        element.setAttribute("contenteditable", val);
      }
    },
    isShowAddMenu(val) {
      this.ifScroll(val);
    },
    isShowOperateBar(val) {
      this.ifScroll(val);
    },
  },
  mounted() {
    // 处理textarea的只读属性切换
  },
  methods: {
    ifScroll(val) {
      if (val) {
        document.getElementsByTagName("html")[0].style["overflow-y"] = "hidden";
      } else {
        document.getElementsByTagName("html")[0].style["overflow-y"] = "scroll";
      }
    },
    openOperateBar(e, index) {
      let a = { x: e.clientX, y: e.clientY };
      this.$store.commit("mutationOperateBarContentLayerXY", a);
      this.$store.commit("mutationCurrentBlockIndex", index);
      setTimeout(() => {
        this.$store.commit("mutationIsShowOperateBar", true);
      }, 50);
    },
    // 拖拽修改
    dragUpdate() {
      this.render = false;
      this.$nextTick(() => {
        this.render = true;
      });
    },
    // 拖拽完成
    dragEnd() {
      this.$nextTick(() => {
        setTimeout(() => {
          var dom = document.getElementsByClassName("edit");
          for (let i = 0; i < dom.length; i++) {
            const el = dom[i];
            el.blur();
          }
        }, 100);
      });
    },
  },
};
</script>



<style lang="less">
html::-webkit-scrollbar {
  display: none !important;
}

.no-move {
  transition: transform 0s;
}
.flip-list-move {
  transition: transform 0.5s;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.home {
  padding-top: 50px;
  position: relative;
  box-sizing: border-box;
  .header {
    h1 {
      font-size: 50px;
    }
    text-align: center;
    height: 300px;
    .el-link-btn {
      padding: 10px 20px;
      border: 1px solid #dddddd;
      border-radius: 4px;
      font-size: 20px;
    }
    .el-link-btn:hover {
      border-color: #c6e2ff;
      background-color: #ecf5ff;
      color: #303133;
    }
  }
  .editable-switch {
    text-align: center;
    margin-bottom: 20px;
  }

  .btn-wrap {
    margin: 100px 0 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .button {
      width: 20%;
      height: 40px;
      margin: 0 20px;
    }
  }

  .container-870 {
    padding-top: 100px;
    max-width: 870px;
    margin-left: auto;
    margin-right: auto;
    padding: 70px 70px 70px 30px;
    border: 1px solid #dddddd;
    border-radius: 2px;
    box-shadow: 0 8px 42px -8px rgba(82, 94, 102, 0.15);
    margin-bottom: 100px;
    .drag-btn {
      padding: 2px 5px;
      border-radius: 2px;
      color: #999999;
      .icondrag {
        font-size: 14px;
      }
    }
    .drag-btn:hover {
      background: #eeeeee;
      cursor: pointer;
    }

    .line-wrap {
      display: flex;
      align-items: center;
      line-height: 20px;
      .line-left {
        width: 40px;
        display: flex;
        align-items: center;
        margin-right: 20px;
        visibility: hidden;
      }
      .line-right {
        width: 100%;
      }
    }
    .line-wrap:hover {
      .line-left {
        visibility: visible;
      }
    }
    .line-wrap:focus {
      visibility: hidden;
    }
  }
}
</style>


